<template>
  <div>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" :show-indicators="false">
      <van-swipe-item>
        <img style="width: 100%" src="/images/2.jpg" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img style="width: 100%" src="/images/3.jpg" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img style="width: 100%" src="/images/4.jpg" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div id="container">
      <div id="content">
        <div>环球影城大酒店</div>
        <div id="phone">
          <van-icon name="phone-o" />&nbsp;<span>86400 877 8899</span>
        </div>
        <hr style="height: 2px; background-color: #f9f9f9; border: none" />
        <div>
          <van-icon name="location-o" />&nbsp;<span
            >海南省琼海市滨海大道8号融创博鳌金湾欢乐海岸A座大厅1号</span
          >
        </div>
      </div>
    </div>
    <!-- 日历 -->
    <div id="calendar">
      <div @click="show = true"> 入住/退房 请选择入住日期</div>
      <van-cell title=" " :value="date"  />
      <van-calendar v-model="show" type="range" @confirm="onConfirm" color="#2c67cf"/>
    </div>
    <!-- 酒店详情 -->
    <div id="item" v-for="(item,i) in roomlist" :key="i" > 
      <div id="top">
       <div id="left" >
         <img src="/images/5.jpg" alt="">
       </div>
       <div id="right">
          <div>{{item.rname}}</div>
          <div>{{item.rdes}}</div>
          <div>{{item.person}}</div>
       </div>
       </div>
       <div id="bottom">
         <button @click="item.count++">+</button>
         <span>{{item.count}}</span>
         <button @click="item.count--" :disabled="item.count==0">-</button>
         <div>预订</div>
         <div>￥{{item.price}}</div>
       </div>
    </div>
    <div id="submit">

        <div><van-icon name="shopping-cart"  size="40px" /></div>
        <span id="count" >合计</span><span id="p">￥{{total}}</span>
        <button>确认</button>
    </div>
  </div>
</template>
<style scoped>
#container {
  position: relative;
}
#content {
  background-color: rgb(245, 243, 243);
  border-radius: 10px;
  position: absolute;
  left: 0;
  top: -30px;
}
#content > div:first-child {
  padding: 20px 0 20px 15px;
  font-size: 1.3rem;
}
#phone {
  padding: 10px 0 10px 15px;
}
#content > div:last-child {
  padding: 15px 0 15px 15px;
}
#calendar {
  margin-top: 200px;
  border-bottom: 4px solid  rgb(247, 245, 245) ;
}
#item{
  margin:  10vw 0 20vw 0;

}
#top{
  display: flex;
}
#left>img{
  width: 25vw;
  height: 25vw;
  border-radius: 10px;
  margin-left: 7vw;
}
#right{
  margin-left: 7vw;
}
#right>div{
  margin-bottom: 3vw;
}
#right>div:first-child{
  font-weight: bold;
  font-size: 1.1em;
}
#right>div:first-child ~ div{
   color: #6b6b6b ;
   font-size: .8em;
}
#bottom{
  display: flex;
  flex-direction: row-reverse;
  margin-right: 15px;
}
#bottom>div{
  padding-right: 5vw;
}
#bottom>div:last-child{
  font-weight: bold;
  font-size: 1.1em;
}
#bottom>div:first-child{
  color: #2c74c8;
  font-weight: bold;
}
#bottom>button{
  border: none;
  background-color: #e6ecf6;
  color: #2865d8;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 1.3em;

}
#bottom>span{
    font-weight: bold;
    margin: 6px 10px 0px 10px;

}
#submit{
  background-color: white;
  display: flex;
  width: 100vw;
  height: 20vw;
  position: fixed;
  bottom: 0px;
}
#submit>button{
  border: none;
  background:#2865d8 ;
  border-radius: 30px;
  color: white;
  width: 80px;
  height: 40px;
  margin: 10px 0 0 17vw
}
#submit>div{
  margin: 10px  20px 0 20px;

}
#count{
  margin-top: 10px ;
}
#submit>span{
  margin-right: 20px ;
  padding-top:10px ;
}
#p{
  color: #f9604d;
  font-weight: bold;
  font-size: 1.5em;
  margin-top: 5px;
  
  
}
</style>
<script>
export default {
  data() {
    return {
      date: "",
      show: false,
      value: 1,
      roomlist:[
        {rname:"豪华大床房",rdes:"30平方米 大床(1.8米x2米)",person:"最多3人入住",count:0,price:388},
        {rname:"豪华双大床房",rdes:"30平方米 双大床(2x1.5米x2米)",person:"最多4人入住",count:0,price:388},
        {rname:"城市大道景观大床房",rdes:"30平方米 大床(1.8米x2米)",person:"最多3人入住",count:0,price:488},
          
        
      ]
    };
    
  },
  computed: {
    total() {
      let sum=0
      this.roomlist.forEach(value=>{
        sum+=value.price*value.count
      })
      return sum
    }
  },
  methods: {
    formatDate(date) {
      return `${date.getMonth() + 1}月/${date.getDate()}日`;
    },
    onConfirm(date) {
      const [start, end] = date;
      this.show = false;
      this.date = `${this.formatDate(start)}  到  ${this.formatDate(end)}`;
    },
  },
};
</script>